<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <script src="../js/vue.js"></script>
    <body>
        <div id="container">
            <p>字符串类型:{{str}}</p>
            <p>数值类型:{{number}}</p>
            <p>数组类型:{{arr}}</p>
            <p>数组取值:{{arr[1]}}</p>
            <p>对象类型:{{obj}}</p>
            <p>对象取值:{{obj.name}} {{obj["name"]}} {{obj["age"]}}</p>
            <p>布尔类型:{{flag}}</p>
            <p>布尔取反:{{!flag}}</p>
            <hr>
            <p>null类型:{{null}}</p>
            <p>undefined类型:{{undefiend}}</p>
            <hr>
            <p>字符串中的换行符类型:{{arg1}}</p>
            <p>字符串中的标签类型:{{arg2}}</p>
            <p>时间类型:{{time}}</p>
        </div>
        <script>
            new Vue({
                el:"#container",
                data:{
                    str:"字符串",
                    number:123,
                    arr:[1,2,3,4,5],
                    obj:{
                        name:"iboy",
                        age:20
                    },
                    flag:true,
                    null:null,
                    undefined:undefined,
                    arg1:"aaaaaaaa\nbbbbbbbbb",
                    arg2:"<p>篮球天王蔡徐坤!</p>",
                    time:new Date()
                }
            })
        </script>
    </body>
</html>